

<!-- 商品列表-订单列表 -->
<template name="goodListOrder">
	<view class="all">
		<view @click="gotoDetail(detailInfo.activityFlag, detailInfo.orderType, item.goodsBaseInfo.goodsCd)" class="shopGoodsList" v-for="(item, index) of list" :key="index">
			<view class="goodsBaseInfo">
				<view class="poster-Container">
					<image class="good-url" :src="imgSite + item.goodsBaseInfo.coverPicture"></image>
					
					<!-- 拼团 -->
					<view v-if="detailInfo.orderType == '20'" class="preGroup-NUM">
						拼团预售·{{detailInfo.groupCount}}人拼
					</view>
				</view>
	

				<view class="good-detail">
					<view class="name ellipsis1">
						<!-- 预售、秒杀 -->
						<text class="goods-list-tip-ys" v-if="item.is_yushou === '1'">预售</text>
						<text class="goods-list-tip-ms" v-if="item.is_miaosha === '1'">秒杀</text>
						<text>{{ item.goodsBaseInfo.goodsName }}</text>
					</view>
					<view>
						<text class="size">{{ item.goodsBaseInfo.attributes | getSpecStr }}</text>
					</view>

					<!-- 价格，积分，购买数量 -->
					<view class="number">
						<view class="price">
							<text>¥{{ item.price / 100 }}</text>
							<!-- <text v-if="item.points">+{{ item.points }}积分</text>
							<text v-if="item.waters">+{{ item.waters / 100 }}水券</text> -->
						</view>

						<!-- 操作数量 -->
						<view class="num">
							x{{item.count}}
						</view>
					</view>
					
					<view v-if="detailInfo.orderType == '20'" class="preGroup">
						预计{{detailInfo.groupFhDate}}发货
					</view>
				</view>
			</view>

			<!-- 是否保税商品: 10-常规; 20-保税; -->
			<view class="bs-Container">
				<view v-if="item.type == 20" class="bs_goods">保税商品</view>
			</view>
			
			
			<!-- 赠品信息 -->
			<view v-for="(item3, index) of item.giftOrderDetailList" :key="item3.orderGiftDetailId" class="gift">
				<view v-if="index == 0" class="left">赠品</view>
				<view v-else class="left" style="visibility: hidden;">赠品</view>
				<view @click="gotoDetail(0, '', item3.goodsCd)" class="g-name ellipsis2">{{ item3.goodsBaseInfo | giftGoodFormat}}</view>
				<view class="g-num">x{{ item3.giftCount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		filters: {
			
			//已选规格Str 
			getSpecStr(json) {
				
				try{
					var str = "";
					json = JSON.parse(json.goodsCategoryAttr);
					for(var i = 0; i < json.length; i++) {
						str += (json[i]["value"] + ' ');
					}
					return str;
				}catch(e){
					return "";
				}
			},
			
			
			//赠品信息格式化
			giftGoodFormat(goodsBaseInfo) {
				var baseInfo = JSON.parse(goodsBaseInfo);
				return baseInfo['goodsName'];
			}
		},
		props: {
			list: {
				type: null,
				default: ''
			},
			detailInfo: {
				type: null,
				default: ''
			}
		},
		data() {
			return {
				hover: ''
			}
		},
		computed: {
			...mapState(['imgSite'])
		},
		methods: {
			gotoDetail: function(activityFlag, activityType, id) {
				
				if(activityFlag == 20) {
					
					// 10:普通订单 20：团购 40：砍价
					if(activityType) {
						if(activityType == 10) {
							uni.navigateTo({
								url: '/pages/detail/detail?id=' + id
							});
						}
						if(activityType == 40) {
							uni.navigateTo({
								url: '/pages/detail/bargain?id=' + id
							});
						}
						if(activityType == 20) {
							uni.navigateTo({
								url: '/pages/detail/preGroup?id=' + id
							});
						}
					}else {
						uni.navigateTo({
							url: '/pages/detail/detail?id=' + id
						});
					}
				}else {
					uni.navigateTo({
						url: '/pages/detail/detail?id=' + id
					});
				}
			},
		}
	}
</script>

<style lang="scss">

	// 商品列表
	.shopGoodsList {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 28rpx 0;
		
		.goodsBaseInfo {
			display: flex;
			align-items: center;
			margin: 0 auto;
			width: 690rpx;
			height: 160rpx;
		}
	
		.check {
			position: relative;
			bottom: 60rpx;
		}
	
		.good-url {
			height: 160rpx;
			width: 160rpx;
		}
	
		.good-detail {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 490rpx;
			height: 100%;
			margin-left: 40rpx;
	
			.name {
				// height:60rpx;
				font-size:26rpx;
				font-family:PingFang SC;
				color:rgba(51,51,51,1);
				line-height:34rpx;
			}
	
			.size {
				height:36rpx;
				line-height: 36rpx;
				background:#FFFFFF;
				border-radius:5rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				color:rgba(102,102,102,1);
				line-height:40rpx;
			}
	
			.number {
				display: flex;
				height: 40rpx;
				align-items: center;
	
				.price {
					width: 50%;
					font-size: 30rpx;
					color: #FE5E49;
				}
	
				.num {
					width: 50%;
					font-size: 24rpx;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					height: 100%;
					color: #333333;
				}
			}
		}
	}
	
	// 保税商品
	.bs-Container {
		margin: 0 auto;
		margin-top: 4rpx;
		width: 690rpx;
		
		.bs_goods {
			margin-left: 62rpx;
			font-size: 20rpx;
			color: white;
			background: #FE5E49;
			width: 100rpx;
			height: 30rpx;
			text-align: center;
			border-radius: 15rpx;
		}
	}
	
	
	//赠品信息
	.gift {
		display: flex;
		width: 100%;
		margin-top: 30rpx;
		padding-left: 194rpx;
		padding-right: 20rpx;
	
		.left {
			font-size: 20rpx;
			font-weight:bold;
			color: #333333;
		}
		.g-name {
			margin-left: 10rpx;
			max-width: 380rpx;
			font-size: 20rpx;
			color: #666666;
		}
		.g-num {
			margin-left: auto;
			font-size: 20rpx;
			color: #333333;
		}
	}
	
	
	//拼团样式
	.poster-Container {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		// border-radius: 0 0 10rpx 10rpx;
		// overflow: hidden;
		
		.preGroup-NUM {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height:38rpx;
			line-height: 38rpx;
			text-align: center;
			font-size: 20rpx;
			color: #FFFFFF;
			background:rgba(122,70,223,0.6);
		}
	}
	
	.preGroup {
		font-size: 20rpx;
		color: #7A46DF;
	}
</style>



